import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformRoute extends StatelessWidget {
  const TransformRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('变换（Transform）'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[
              const SizedBox(height: 80),
              Container(
                child: Transform(
                  alignment: Alignment.topRight,
                  transform: Matrix4.skewY(0.3),
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    color: Colors.deepOrange,
                    child: const Text("Apartment for rent!"),
                  ),
                ),
                color: Colors.black,
              ),
              const SizedBox(height: 50),
              DecoratedBox(
                decoration: const BoxDecoration(color: Colors.red),
                child: Transform.translate(
                  offset: const Offset(-50, -5.0),
                  child: const Text(
                    "Hello world",
                    style: TextStyle(fontSize: 22),
                  ),
                ),
              ),
              const SizedBox(height: 80),
              DecoratedBox(
                decoration: const BoxDecoration(color: Colors.red),
                child: Transform.rotate(
                  angle: math.pi / 2,
                  child: const Text(
                    "Hello world",
                    style: TextStyle(fontSize: 22),
                  ),
                ),
              ),
              const SizedBox(height: 100),
              DecoratedBox(
                decoration: const BoxDecoration(color: Colors.red),
                child: Transform.scale(
                  scale: 3,
                  child: const Text("Hello world"),
                ),
              ),
              const SizedBox(height: 100),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  DecoratedBox(
                    decoration: const BoxDecoration(color: Colors.red),
                    child: Transform.scale(
                      scale: 1.5,
                      child: const Text("Hello world"),
                    ),
                  ),
                  const Text(
                    "你好",
                    style: TextStyle(color: Colors.green, fontSize: 18.0),
                  )
                ],
              ),
              const SizedBox(height: 100),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  DecoratedBox(
                    decoration: BoxDecoration(color: Colors.red),
                    child: RotatedBox(
                      child: Text("Hello world"),
                      quarterTurns: 2,
                    ),
                  ),
                  Text(
                    "你好",
                    style: TextStyle(color: Colors.green, fontSize: 18.0),
                  )
                ],
              ),
              const SizedBox(height: 100),
            ],
          ),
        ),
      ),
    );
  }
}
